<template>
  <el-card style="margin-bottom: 10px">
    <el-table border size="small" v-bind="$attrs" highlight-current-row style="width: 100%">
      <template v-for="item in props.config.column">
        <!-- 操作 -->
        <template v-if="item.type === 'handler'">
          <el-table-column :key="item.prop" v-bind="item" align="center" fixed="right">
            <template #default="{ row }">
              <el-button
                v-for="btn in item.btns"
                :key="btn.label"
                :icon="btn.icon"
                size="small"
                text
                circle
                :type="btn.type"
                @click="handelClick($event, btn.click, row)"
              >
                <!-- {{ btn.label }} -->
              </el-button>
            </template>
          </el-table-column>
        </template>
        <!-- 自定义slot -->
        <template v-else-if="item.type === 'custom'">
          <el-table-column :key="item.prop" v-bind="item" :show-overflow-tooltip="true">
            <template #default="scope">
              <slot :name="item.slotName" v-bind="scope" :prop="item.prop" />
            </template>
          </el-table-column>
        </template>
        <!-- 默认 -->
        <template v-else>
          <el-table-column :key="item.prop" v-bind="item" :show-overflow-tooltip="true" />
        </template>
      </template>
    </el-table>
    <!-- 分页 -->
    <el-row justify="end" style="margin-top: 10px; margin-right: 5px">
      <el-pagination
        v-if="isShowPager"
        layout="prev, pager, next,total"
        :current-page="props.config.paginationData.currentPage"
        :page-size="props.config.paginationData.pageSize"
        :total="props.config.paginationData.total"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </el-card>
</template>

<script setup>
const props = defineProps({
  config: {
    type: Object,
    default: () => ({
      column: [],
      paginationData: {
        pageSize: 50,
        currentPage: 1,
        total: 0
      }
    }),
    required: true
  },
  isShowPager: {
    type: Boolean,
    default: true
  }
})
const btnClickList = []
props.config.column.forEach(item => {
  if (item.type === 'handler') {
    item.btns.forEach(btn => {
      btnClickList.push(btn.click)
    })
  }
})

// 定义 Emits
const emit = defineEmits(['pageChange', 'handelEditClick', 'handleDeleteClick'])

// 事件处理函数
const handelClick = (e, click, row) => {
  e.stopPropagation()
  emit(click, row)
}

const handleCurrentChange = val => {
  emit('pageChange', val)
}
</script>
